<template>
  <div>
    <el-dialog
      v-if="!props.viewOnly"
      v-model="props.visible"
      :fullscreen="true"
      @opened="onOpened"
      @closed="emit('update:visible', false)"
      :show-close="false"
      class="no-header-dialog"
    >
      <workflowEditPanel
        v-loading="loading"
        ref="workflowEditPanelRef"
        :nodeData="flowDesignData"
        @closed="emit('update:visible', false)"
        @update="update"
        :viewOnly="props.viewOnly"
      />
    </el-dialog>

    <el-drawer
      v-if="props.viewOnly"
      v-model="props.visible"
      direction="ltr"
      size="60%"
      :with-header="false"
      @opened="onOpened"
      @closed="emit('update:visible', false)"
    >
      <template #title>
        <span style="font-size: 16px; font-weight: bold">表单预览 </span>
      </template>

      <workflowEditPanel
        v-loading="loading"
        ref="workflowEditPanelRef"
        :nodeData="flowDesignData"
        @closed="emit('update:visible', false)"
        @update="update"
        :viewOnly="props.viewOnly"
      />
    </el-drawer>

    <FlowUpdateForm
      v-model:value="updateFormData.value"
      v-model:visible="updateFormData.visible"
      @updateflow="onUpdateFlow"
    />
  </div>
</template>

<script setup>
import { reactive, ref, unref } from "vue";
import { useWorkflowDesignStore } from "@/stores/workflowDesign";
import workflowEditPanel from "@/components/WorkflowDesign/Designs/panel.vue";
import FlowUpdateForm from "./FlowUpdateForm.vue";

const props = defineProps({
  visible: {
    default: false,
  },
  value: {
    default: () => ({
      id: "",
      activeVersion: 0,
      description: "",
      name: "",
    }),
  },
  viewOnly: {
    default: false,
  },
  workTaskId: {
    default: "",
  },
});

const emit = defineEmits(["update:visible", "closed", "update:value"]);

const loading = ref(false);
const flowDesignData = ref("");
const versionData = ref({});
const submitformData = ref({});
const workflowEditPanelRef = ref(null);

const updateFormData = reactive({
  value: {},
  visible: false,
});

const workflowDesignStore = useWorkflowDesignStore();

const onCancel = () => {
  emit("update:visible", false);
};

const onOpened = async () => {
  loading.value = true;
  const res =
    props.workTaskId && props.workTaskId != ""
      ? await workflowDesignStore.getWorkflowVersionByTaskId({
          workTaskId: props.workTaskId,
        })
      : await workflowDesignStore.getWorkflowVersion({
          versionNo: props.value.activeVersion,
          id: props.value.id,
        });
  flowDesignData.value =
    !res.drawingInfo || res.drawingInfo.length == 0
      ? {
          name: "",
          nodeList: [],
          lineList: [],
        }
      : JSON.parse(res.drawingInfo);
  versionData.value = res;

  workflowEditPanelRef.value.loadNodeData();
  submitformData.value = {};
  loading.value = false;
};

const update = (newFlowDesignData) => {
  flowDesignData.value = newFlowDesignData.drawingInfo;
  const updateData = {
    des: props.value.description ||submitformData.value.des,
    name: props.value.name || submitformData.value.name,
    versionDescription: versionData.value.description,
    drawingInfo: flowDesignData.value,
    workflowId: {
      versionNo: versionData.value.versionNo ||1,
      id: versionData.value.workflowId,
    },
    workflowLines: newFlowDesignData.workflowLines,
    workflowNodes: newFlowDesignData.workflowNodes,
  };
  updateFormData.value = updateData;
  updateFormData.visible = true;
};
const onUpdateFlow = async (submitform) => {
  submitformData.value = submitform
  const res =await workflowDesignStore.getWorkflowVersion(submitform.workflowId);
  flowDesignData.value =
    !res.drawingInfo || res.drawingInfo.length == 0
      ? {
          name: "",
          nodeList: [],
          lineList: [],
        }
      : JSON.parse(res.drawingInfo);
  versionData.value = res;

  workflowEditPanelRef.value.loadNodeData();
}
</script>

<style lang="less" scoped>
:deep(.no-header-dialog) {
  padding: 0px !important;
  .el-dialog__header {
    padding: 0px;
    height: 0px;
    text-align: right;
  }
  .el-dialog__body {
    width: 100%;
    height: calc(100vh);
    padding: 0px !important;
  }
}
:deep(.el-drawer__body) {
  padding: 0px;
}
</style>
